<template>
  <a-layout-header style="background: #fff; padding: 0">
    <a-icon
      class="trigger"
      :type="this.$store.state.collapsed == true ? 'menu-unfold' : 'menu-fold'"
      @click="changeMenuStatu"
    />
    <div class="header-right">
      <div class="header-right-top">
        <span>{{currentTime}}</span>
        <span :style="{marginLeft: '15px',marginRight: '15px'}">{{weather}}</span>
      </div>
      <div class="header-right-bottom">
        <span>
          <a-avatar :src="'http:' + user.avatar" />
        </span>
        <span :style="{marginLeft: '15px'}">欢迎，{{user.username}}</span>
        <a-button type="link" @click="logout">退出登录</a-button>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import { mapGetters } from 'vuex'
import { formateDate } from '@/utils/dateUtils.js'
import { reqWeather } from '@/network/common.js'
export default {
  name: '',
  data () {
    return {
      currentTime: formateDate(Date.now()),
      weather: '',
    };
  },
  computed: {
    ...mapGetters(['user'])
    /* user () {
      return this.$store.getters.user;
    } */
  },
  created () {
    //获取天气情况
    reqWeather().then(res => {
      this.weather = res
    })
  },
  mounted () {
    this.getCurrentTime()
  },
  methods: {
    //得到当前时间
    getCurrentTime () {
      setInterval(() => {
        this.currentTime = formateDate(Date.now())
      }, 1000)
    },
    //改变菜单折叠与展开的状态
    changeMenuStatu () {
      this.$store.commit('change')
    },
    //退出登录
    logout () {
      window.localStorage.removeItem('NiuToken')
      window.localStorage.removeItem('currentSelectedMenu')
      window.localStorage.removeItem('defaultOpenMenu')
      this.$store.dispatch('clearCurrentState')
      this.$router.replace('/login')
    }
  },
  components: {

  },
};
</script>

<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

.header-right {
  display: flex;
  flex-direction: column;
  width: 230px;
  float: right;
  margin-right: 20px;
  height: 100%;
}

.header-right-top {
  display: flex;
  align-items: center;
  justify-content: right;
  flex: 1;
  height: 40%;
  border-bottom: 1px solid #1da57a;
}

.header-right-bottom {
  display: flex;
  align-items: center;
  justify-content: right;
  flex: 1;
  height: 60%;
}
</style>
